<template>
    <div class="home">
        <Header head-title="门诊挂号" go-back="true"></Header>
        <section class="group searchInput">
            <img class="imgIcon" src="../../assets/img/searchIcon.png" alt="">
            <el-input class="Search" placeholder="搜索医院、医生、科室、疾病" v-model="input" clearable>
            </el-input>
        </section>
        <section class="group">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-submenu index="1">
                    <template slot="title">医院排序</template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">医院类型</template>
                    <el-menu-item index="2-1">妇幼</el-menu-item>
                    <el-menu-item index="2-2">传染病</el-menu-item>
                    <el-menu-item index="2-3">综合性</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">医院等级</template>
                    <el-menu-item index="3-1">三级甲等</el-menu-item>
                    <el-menu-item index="3-2">三级</el-menu-item>
                    <el-menu-item index="3-3">二级</el-menu-item>
                </el-submenu>
            </el-menu>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
            <section class="Select HosAll" @click="HosRegisted()">
                <section class="HosImg">
                    <img class="borderR" src="../../assets/img/image1.jpg" alt="">
                </section>
                <div class="HosCon">
                    <section class="Select">
                        <h3 class="fonts">平顶山市第一人民医院</h3>
                        <el-button type="primary" size="mini">立即挂号</el-button>
                    </section>
                    <section class="Select HosCenter">
                        <p class="activecolor fonts">三级甲等</p>
                        <p class="fonts">综合医院</p>
                    </section>
                    <section class="Select iconDW">
                        <p class="fontsMin">河南省平顶山市卫东区优越路117号</p>
                    </section>
                </div>
            </section>
        </section>
    </div>
</template>

<script>
import Header from '../../components/Header'
export default {
  name: 'Home',
  data () {
    return {
      activeIndex: '1',
      input: ''
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    handleSelect (key, keyPath) {
    //   console.log(key, keyPath)
    },
    //  点击医院
    HosRegisted () {
      this.$router.push({
        path: '/HosRegisted'
      })
    }
  }
}
</script>

<style scoped>
.home {
    padding-top: 1rem;
}
.group {
    padding: 0 0.2rem;
    margin-top: 0;
}
</style>
